<template>
  <div class="page">
        <div class="top">
            <div class="first-row">
                <h1>单人两荤菜外卖套餐</h1>
                <p>
                    <img src="/static/imgs_s08/s08_share.png" alt="">
                    <span>分享</span>
                </p>
            </div>
            <div class="second-row">
                <p>2人团</p>
                <p>24小时不成团退款</p>
                <p>|</p>
                <p>免预约</p>
                <p>半年销量526</p>
            </div>
            <div class="third-row">
                <img src="/static/imgs_s08/s08_goods08.png" alt="">
            </div>
        </div>
        <div class="center">
            <div class="menu">
                <p class="title">外卖套餐</p>
                <div class="list1">
                    <p>·两荤菜外卖套餐(1份)</p>
                    <p>￥15.9</p>
                </div>
                <p class="title">备注</p>
                <div class="list2">
                    <p>·免费提供餐巾纸 </p>
                    <p>·荤菜：宫保鸡丁、鱼香肉丝。</p>
                    <p>·素菜：烧青菜、番茄鸡蛋。</p>
                </div>
                <p class="title">有效期:</p>
                <p class="time">·2019-06-18 至 2019-09-18</p>
                <p class="more">查看更多</p>
            </div>
            <div class="bottom">
                <div class="title2">
                    <div class="colmun"></div>
                    <p>餐厅介绍</p>
                </div>
                <div class="add">
                    <div class="imgs"></div>
                    <div class="add-txt">
                        <p>汇方圆</p>
                        <div class="add-txt1">
                            <img src="/static/imgs_s08/s08_time.png" alt="">
                            <span>09:30 至 22:30</span>
                        </div>
                        <div class="add-txt1">
                            <img src="/static/imgs_s08/s08_address.png" alt="">
                            <span>63.6km | 中州大道农业路苏荷中心</span>
                        </div>
                    </div>
                    <img class="phone" src="/static/imgs_s08/s08_phone.png" alt="">
                </div>
            </div>
            <div style="height: 0;"></div>
        </div>
        <div class="footer">
            <div class="footer1">
                <p>￥20.00</p>
                <p>最高门市价</p>
            </div>
            <div class="right">
                <div class="footer2">
                    <p>￥18.8</p>
                    <p>单独购买</p>
                </div>
                <div class="footer3">
                    <p>￥15.9</p>
                    <p>发起拼团</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .page {
            width: 100%;
            font-family: "PingFang";
            background-color: #ECECEC;

        }

        .top {
            width: 100%;
            height: 250px;
            background-color: #fff;
        }

        .first-row {
            display: flex;
            height: 55px;
            position: relative;
        }

        .first-row h1 {
            font-size: 23px;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
            line-height: 20px;
            margin-top: 20px;
            margin-left: 16px;
        }

        .first-row p {
            position: absolute;
            right: 0px;
            top: 19px;
            width: 53px;
            height: 24px;
            background: rgba(50, 177, 108, 1);
            border-radius: 12px 0 0 12px;
            padding-left: 10px;
            line-height: 24px;
            box-sizing: border-box;
        }

        .first-row p img {
            width: 13px;
            height: 13px;
        }

        .first-row p span {
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .second-row {
            position: relative;
            display: flex;
            height: 15px;
        }

        .second-row p {
            height: 13px;
            text-align: center;
            line-height: 13px;
        }

        .second-row p:nth-child(1) {
            width: 33px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
            border-radius: 2px;
            font-size: 10px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-left: 17px;
        }

        .second-row p:nth-child(2) {
            font-size: 12px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-left: 7px;
        }

        .second-row p:nth-child(3) {
            margin: 0 8px;
        }

        .second-row p:nth-child(4) {
            font-size: 12px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .second-row p:nth-child(5) {
            font-size: 12px;
            font-weight: 500;
            color: rgba(163, 165, 168, 1);
            position: absolute;
            right: 12px;
        }

        .third-row {
            width: 344px;
            height: 157px;
            margin: 0 auto;
            margin-top: 23px;
        }

        .third-row img {
            width: 344px;
            height: 157px;
        }

        .center {
            width: 100%;
            box-sizing: border-box;
            padding-bottom: 60px;
        }

        .menu {
            width: 100%;
            height: 266px;
            margin-bottom: 10px;
            background-color: #fff;
        }

        .menu .title {
            height: 13px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
            box-sizing: border-box;
            padding-top: 21px;
            margin-left: 16px;
        }

        .menu .list1 {
            position: relative;
            display: flex;
            margin-top: 23px;
            justify-content: space-between;
        }

        .menu .list1 p:nth-child(1) {
            font-size: 13px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-left: 27px;
        }

        .menu .list1 p:nth-child(2) {
            font-size: 13px;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
            position: absolute;
            right: 10px;

        }

        .menu .list2 {
            height: 52px;
            margin-top: 23px;
            margin-left: 27px;
        }

        .menu .list2 p {
            font-size: 13px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);

        }

        .time {
            margin-top: 23px;
            margin-left: 27px;
            font-size: 13px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .more {
            width: 52px;
            height: 12px;
            font-size: 13px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
            line-height: 20px;
            margin: 0 auto;
            margin-top: 19px;
        }

        .bottom {
            width: 100%;
            /* height: 142px; */
            /* margin-bottom:60px; */
            background-color: #fff;
        }

        .bottom .colmun {
            width: 3px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
            border-radius: 2px;
            margin-top: 17px;
            margin-left: 15px;
        }

        .title2 {
            display: flex;
            height: 45px;
        }

        .title2 p {
            height: 15px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
            margin-top: 15px;
            margin-left: 7px;
        }

        .bottom .add {
            display: flex;
            position: relative;
            box-sizing: border-box;
            padding-bottom: 10px;
        }

        .add .imgs {
            width: 79px;
            height: 79px;
            background: rgba(236, 236, 236, 1);
            border-radius: 6px;
            margin-left: 15px;
        }

        .add-txt p {
            font-size: 16px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-left: 9px;
        }

        .add-txt1 img {
            width: 14px;
            height: 14px;
        }

        .add-txt .add-txt1 {
            margin-left: 9px;
            margin-top: 10px;
        }

        .add-txt .add-txt1 span {
            font-size: 11px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);

        }

        .add .phone {
            position: absolute;
            width: 22px;
            height: 22px;
            right: 14px;
            top: 28px;
        }

        .footer {
            width: 100%;
            height: 50px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            font-family: "Source Han Sans CN";
        }

        .right {
            display: flex;
            position: absolute;
            right: 0;
            height: 50px;
        }

        .footer .footer1 {
            width: 146px;
            height: 50px;
            position: absolute;
            left: 0;


        }

        .footer1 p:nth-child(1) {
            width: 51px;
            height: 13px;
            font-size: 16px;
            font-weight: 400;
            text-decoration: line-through;
            color: rgba(246, 83, 88, 1);
            margin-top: 9px;
            margin-left: 14px;

        }

        .footer1 P:nth-child(2) {
            font-size: 10px;
            font-weight: 400;
            color: rgba(44, 44, 47, 1);
            margin-left: 14px;
            margin-top: 10px;
        }

        .footer .footer2 {
            width: 108px;
            background-color: #F19149;
        }

        .footer2 p:nth-child(1) {
            font-size: 14px;

            font-weight: 400;
            color: rgba(253, 249, 248, 1);
            margin-top: 8px;
            margin-left: 32px;
        }

        .footer2 p:nth-child(2) {
            font-size: 11px;
            font-weight: 400;
            color: rgba(253, 249, 248, 1);
            margin-left: 34px;
        }

        .footer .footer3 {
            width: 121px;
            background-color: #32B16C;
        }

        .footer3 p:nth-child(1) {
            font-size: 14px;
            font-weight: 400;
            color: rgba(253, 249, 248, 1);
            margin-top: 8px;
            margin-left: 32px;
        }

        .footer3 p:nth-child(2) {
            font-size: 11px;
            font-weight: 400;
            color: rgba(253, 249, 248, 1);
            margin-left: 34px;
        }
</style>
